<template>
	<view class="wallet-box">
		<view class="wallet-center">
			<view class="wallet-mone ">
				<view class="text-center lh66 pt60 r20 h260 bgc-box" style="color: #DBC48A;">
					<view class="f28">
						<image src="../../static/img/pa.png" class="w30 h26 mr19" mode=""></image>
						我的余额
					</view>
					<view class="f46 " style="font-weight: 600;">
						{{userInfo.starNum}}
					</view>
				</view>


				<view class="mt12 f30 flex h80 lh80 justify-around align-center" style="color: #DBC48A;">
					<view class="w300 r40 text-center" style="background-color: #000000;" @click="l.to('/pages/home/upMoney')">
						充值
					</view>
					<view class="w300 r40 text-center"
						style="background-color: #000000;"
						@click="l.to('/pages/me/withdraw')">
						提现
					</view>
				</view>
			</view>
			<view class="h40" style="background-color: #FFFFFF;">
				
			</view>


			<view class="bill-box">
				<view class="f32 pl30" style="font-weight: 600; color: #000000;">
					我的账单
				</view>
				<view class="w510">
					<u-tabs :list="list" active-color="#40C6A8" bg-color="#FAFAFA" inactive-color="#333333" bar-width="26" bar-height="6" font-size="26" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<view class="pl30 pr30 mt30">
					<view class="box-center-list r20">
						<view class="flex justify-between align-center mb49" v-for="(item,index) in 5" :key="index">
							<view class="">
								<view class="f28" style="color: #333333;">
									充值
								</view>
								<view class="f24" style="color:#808080 ;">
									2012-04-23 14:56:23
								</view>
							</view>
							<view class="flex align-center f34" style="font-weight: 600;">
								<image src="../../static/img/icon-one.png" class="w60 h60" mode=""></image>
								+12
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '充值'
				}, {
					name: '送礼'
				}, {
					name: '收礼',
				}, {
					name: '返利',
				}, {
					name: '提现',
				}],
				current: 0,
				userInfo: {},
			};
		},
		onShow() {
			this.getUserInfo()
			this.rechargeRecord()
		},
		onLoad(e) {},
		watch: {
			current(newValue, oldValue) {
				if (newValue == 0) {
					this.rechargeRecord()
				}
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			
			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
			},
			
			async rechargeRecord() {
				const res = await this.$u.post('api/user/recharge/rechargeRecord')
				console.log('res==>', res);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		height: 100%;
		font-family: PingFang SC;
		background-color: #FAFAFA;
	}

	.wallet-box {

		.wallet-center {

			/deep/.wallet-mone {
				background-color: #FFFFFF !important;
				z-index: 1000;

				.bgc-box {
					background: url(https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/box.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.bill-box {
				padding: 49rpx 0rpx;
				background-color: #FAFAFA;
				
				.box-center-list {
					border-radius: 20rpx;
					padding: 40rpx 30rpx;
					background-color: #FFFFFF;
				}
			}
		}
	}
</style>
